<template>
  <div>
    <i-page-header class="product_tabs" title="单位管理"> </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="search-inner">
        <div class="fx-r fx-bc">
          <div class="label">被评信息:</div>
          <div style="width: 150px" class="value">
            <el-input
              v-model="formValidate.name"
              placeholder="请输入被评信息"
            />
          </div>

          <div class="label">归属:</div>
          <div style="width: 150px" class="value">
            <Select
              v-model="formValidate.action"
              clearable
              placeholder="归属"
              style="width: 140px"
            >
              <Option value="bumen">单位</Option>
              <Option value="bumen_unit">部门</Option>
              <Option value="member">办事人员</Option>
            </Select>
          </div>

          <div class="label">满意度:</div>
          <div style="width: 150px" class="value">
            <Select
              v-model="formValidate.type"
              clearable
              placeholder="满意度"
              style="width: 140px"
            >
              <Option :value="1">满意</Option>
              <Option :value="2">不满意</Option>
            </Select>
          </div>

          <div class="value">
            <el-button @click="tapSearch" type="primary" icon="el-icon-zoom-in"
              >搜索</el-button
            >
          </div>

          <div class="fx-g1"></div>

          <Button
            class="export"
            style="margin-left: 10px"
            icon="ios-share-outline"
            @click="exports"
            >导出数据</Button
          >
        </div>
      </div>
    </Card>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <el-table
        :data="listData"
        :max-height="elMain - 220"
        v-loading="loading"
        style="margin-top: 10px"
        border
        row-key="id"
      >
        <el-table-column label="序" align="center" prop="name" width="80px">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="被评信息" align="center" prop="name">
        </el-table-column>

        <el-table-column label="归属" align="center" prop="name">
          <template #default="scope">
            <div
              v-if="scope.row.action == 'bumen'"
              style="color: #0d6eff; font-weight: bold"
            >
              单位
            </div>
            <div
              v-if="scope.row.action == 'bumen_unit'"
              style="color: #5fb878; font-weight: bold"
            >
              部门
            </div>
            <div
              v-if="scope.row.action == 'member'"
              style="color: #bd2c00; font-weight: bold"
            >
              办事员
            </div>
          </template>
        </el-table-column>

        <el-table-column label="是否满意" align="center">
          <template #default="scope">
            <div style="color: #5fb878" v-if="scope.row.type == 1">满意</div>
            <div style="color: #bd2c00" v-if="scope.row.type == 2">不满意</div>
          </template>
        </el-table-column>

        <el-table-column label="评价内容" align="center" prop="mono">
        </el-table-column>

        <el-table-column label="提交手机号" align="center" prop="mobile">
        </el-table-column>

        <el-table-column label="提交时间" align="center" prop="time">
        </el-table-column>

        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <a @click="tapOpen(scope.row.id)">查看</a>
            <Divider type="vertical" />
            <a @click="tapDel(scope.row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>

      <div class="acea-row row-right page">
        <Page
          :total="page.count"
          show-elevator
          show-total
          @on-change="tapPage"
          :page-size="page.pageSize"
        />
      </div>
      <comment-index-info ref="indexInfo"></comment-index-info>
    </Card>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import { mapState, mapActions } from 'vuex'
import UiUpload from '@/ui/upload/index'
import {
  SysteBumenList,
  SystemSupplierList,
  SysteBumenSave,
  SysteBumenInfo,
  SysteBumenDel,
  SysteBumenTree,
} from '../../../api/system/bumen'
import {
  SysteCommentDel,
  SysteCommentDown,
  SysteCommentList,
} from '../../../api/system/comment'
import CommentIndexInfo from './info/item'
import { export_json_to_excel } from '../../../libs/Export2Excel'
import { SystemMemberDel } from '../../../api/system/member'
export default {
  name: 'system_comment_index',
  components: { CommentIndexInfo, UiUpload, IPageHeader },
  computed: {
    ...mapState('pub/layout', ['elMain']),
  },
  data() {
    return {
      bumenAr: [],
      loading: false,
      listData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },
      formValidate: {
        title: '',
      },
      bumenunit_id: '',
      bumen_id: '',
    }
  },
  mounted() {
    this.bumenunit_id = this.$route.query.bumenunit_id || '0'
    this.bumen_id = this.$route.query.bumen_id || '0'
    this.initView()
  },
  methods: {
    initView: function () {
      SysteBumenTree().then((res) => {
        if (res.code == 200) {
          this.bumenAr = res.data
        }
      })
      this.getData()
      //
    },
    /**
     * 获取数据
     */
    getData: function () {
      this.$utils.loading(this, '获取数据中...')
      SysteCommentList({
        ...this.formValidate,
        page: this.page.page,
        bumenunit_id: this.bumenunit_id,
        bumen_id: this.bumen_id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.listData = res.data.list
            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    tapSearch() {
      this.page.page = 1
      this.getData()
    },

    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getData()
    },

    tapOpen: function (id) {
      this.$refs['indexInfo'].open(id)
    },

    tapDel(id) {
      this.$confirm('此操作将删除评价信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SysteCommentDel({ id: id })
          .then((res) => {
            this.$utils.loadingClose()
            if (res.code == 200) {
              this.getData()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },

    // 导出
    exports() {
      this.$utils.loading(this, '获取数据中...')
      SysteCommentDown({
        ...this.formValidate,
        bumenunit_id: this.bumenunit_id,
        bumen_id: this.bumen_id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            import('@/libs/Export2Excel').then((excel) => {
              const tHeader = [
                '被评估信息',
                '归属',
                '是否满意',
                '评价内容',
                '提交手机号码',
                '提交时间',
              ]
              const filterVal = [
                'name',
                'action',
                'type',
                'mono',
                'mobile',
                'time',
              ]
              for (let i in res.data) {
                if (res.data[i].action == 'bumen')
                  res.data[i]['action'] = '单位'
                if (res.data[i].action == 'bumen_unit')
                  res.data[i]['action'] = '单位'
                if (res.data[i].action == 'member')
                  res.data[i]['action'] = '办事员'

                if (res.data[i].type == 1) res.data[i]['type'] = '满意'
                if (res.data[i].type == 2) res.data[i]['type'] = '不满意'
              }

              var data = this.$utils.formatJson(filterVal, res.data)
              var filename = '评价数据'
              export_json_to_excel({
                header: tHeader,
                data,
                filename,
              })
            })
          } else {
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          }
        })
        .catch((err) => {})
    },
  },
}
</script>
<style scoped>
.search-inner {
  height: 40px;
}
</style>
